<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>刘天平</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			.div0 {
				width: 1358px;
				height: 102px;
				border: 1px solid;
				text-indent: 3em;
				border-bottom-color: orangered;
				margin-bottom: 25px;
			}
			
			.div0 img {
				position: relative;
				top: 23px;
				line-height: 102px;
			}
			
			#div1 {
				display: inline-block;
			}
			
			#div1 span {
				font: 1.9em "微软雅黑";
			}
			
			.body {
				width: 1226px;
				margin: 0 auto;
				border: 1px solid;
			}
			
			.input {
				height: 40px;
				width: 120px;
				border: 1px darkgray solid;
				margin: 0 auto;
			}
			
			.input span {
				font: 20px bold;
				cursor: pointer;
				text-align: center;
				line-height: 38px;
				height: 40px;
				width: 40px;
				display: block;
				float: left;
			}
			
			.input span:hover {
				background-color: gainsboro;
			}
			
			#text {
				height: 40px;
				text-align: center;
				border: none;
				outline: none;
			}
			
			#text:hover {
				background-color: white;
			}
			
			.shan {
				cursor: pointer;
				position: relative;
				font: 25px bold;
				left: 60px;
				background-color: white;
				line-height: 25px;
				text-align: center;
				color: gray;
				height: 25px;
				border-radius: 50%;
				width: 25px;
			}
			
			.shan:hover {
				color: white;
				background-color: orangered;
			}
			
			#boy1 {
				height: 38px;
				border: 0;
				outline: none;
			}
			
			#boy2 {
				height: 38px;
				border: 0;
				outline: none;
			}
			
			#tab_c {
				/*border: 1px solid;*/
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.3);
				position: absolute;
				top: 0px;
				display: none;
			}
			
			.confirm h1 {
				position: relative;
				left: 150px;
				top: 50px;
			}
			
			#tab_c .confirm {
				position: relative;
				top: 300px;
				margin: 0px auto;
				/*border: 1px solid;*/
				width: 500px;
				height: 275px;
				background-color: white;
				z-index: 1;
			}
			
			.confirm li {
				float: left;
				list-style: none;
				margin: 30px 50px;
				position: relative;
				left: 50px;
				top: 100px;
				border: 1px solid;
				width: 100px;
				height: 35px;
				line-height: 35px;
				text-align: center;
				color: white;
			}
			
			.confirm .quxiao {
				background-color: #E0E0E0;
			}
			
			.confirm .quxiao:hover {
				background-color: #B0B0B0;
			}
			
			.confirm .queding {
				background-color: #FF6700;
			}
			
			.confirm .queding:hover {
				background-color: #EA4B12;
			}
		</style>
	</head>

	<body>
		<div>
			<div class="div0">
				<img src="img/logo.png" />
				<div id="div1"> <span>我的购物车</span>温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</div>

			</div>
			<div class="body">
				<table id="buy" border="1" cellspacing="0" cellpadding="0" width="100%">
					<tbody>
						<tr height="72">
							<td width="100">
								<input type="checkbox" name="" id="quanxuan" value="" />全选</td>
							<td width="522">商品名称</td>
							<td width="80">单价</td>
							<td width="150">数量</td>
							<td>小计</td>
							<td>操作</td>
						</tr>
						<tr height="180">
							<td width="100"> <input type="checkbox" name="" id="" value="" /></td>
							<td><img src="../day2/xmad_15008876143703_gOecR.jpg" height="76" width="90" />
							</td>
							<td>199</td>
							<td>
								<div class="input">
				<span   onclick="jian(this)">-</span><span><input size="3"   type="text" name="" id="text" value="1" /></span><span onclick="jia(this)">+</span>
								</div>
							</td>
							<td>199</td>
							<td>
								<div class="shan" onclick="shan(this)">×</div>
							</td>
						</tr>
						<tr height="180">
							<td width="100"> <input type="checkbox" name="" id="" value="" /></td>
							<td><img src="../day2/xmad_15009492598428_qSuMH.jpg" height="76" width="90" /></td>
							<td>166</td>
							<td>
								<div class="input">
				<span   onclick="jian(this)">-</span><span><input size="3"   type="text" name="" id="text" value="1" /></span><span onclick="jia(this)">+</span>
				

								</div>
							</td>
							<td>166</td>
							<td>
								<div class="shan" onclick="shan(this)">×</div>
							</td>
						</tr>
						<tr>
							<td></td>
							<td></td>
							<td></td>
							<td>总计</td>
							<td colspan="2" id="foot">0</td>
						</tr>
					</tbody>
				</table>
				<div id="tab_c">
					<div class="confirm">
						<h1>确定删除吗？</h1>
						<ul>
							<li class="quxiao">取消</li>

							<li class="queding">确定</li>

						</ul>
					</div>
				</div>
			</div>

		</div>
		<script type="text/javascript">
			var buy = document.getElementById("buy");
		
			inputs = buy.getElementsByTagName("input");
			for(var i = 0; i < inputs.length; i++) {
				inputs[i].onchange = function() {
					trs = this.parentNode.parentNode.parentNode.parentNode;
						dj = trs.children[2].innerHTML;
					var num = this.value;
					console.log(num);
					var sum = dj * num;
					//console.log(sum);
					trs.children[4].innerHTML = sum;
					footsum();
				}
			}
			document.getElementById("quanxuan").onclick = function() {
				for(var i = 0; i < inputs.length; i++) {
					inputs[i].checked = this.checked;
				}
			};

			function footsum() {
				var sum=0;
				var buy = document.getElementById("buy");
				var trs = buy.children[0].children;
				for(var i = 1; i < trs.length; i++) {
					if(trs[i].firstElementChild.firstElementChild.checked) {
						sum += parseFloat(trs[i].children[4].innerHTML);
					}
					document.getElementById("foot").innerHTML = sum;
				}
			};

			function shan(t) {
				var con = document.getElementById("tab_c");
				var quxiao = document.querySelector(".quxiao");
				var queding = document.querySelector(".queding");
				quxiao.onclick = function() {
				//	console.log(1);
					con.style.display = "none";
				}
				queding.onclick = function() {
					t.parentNode.parentNode.remove();
					con.style.display = "none";
					footsum();
				}
				con.style.display = "block";
			} 
		    function jian(t){
		    	var n=0;
		    	var sum=0;
		    var  num=parseInt(t.parentNode.children[1].children[0].value) ;
		   	 	var dj=t.parentNode.parentNode.parentNode.children[2].innerHTML;
		   	 	var tr=t.parentNode.parentNode.parentNode;
		    console.log(tr);
		    	if (num<=1) {
		    		num=1;
		    	}else{
		    		n= num - 1;
		    	}
		    	t.parentNode.children[1].children[0].value=n;
		    	  sum=parseInt(dj*n)-sum;
             	 tr.children[4].innerHTML=sum;
		         footsum();
		    }
		   	 function jia(t){
		   	 	var sum=0;
		   	 	var n=0;
		   	 	var dj=t.parentNode.parentNode.parentNode.children[2].innerHTML;
		   	 	var tr=t.parentNode.parentNode.parentNode;
		   	// 	console.log(tr);
		    var  num=parseInt(t.parentNode.children[1].children[0].value) ;
		    	if (num>=20) {
		    		num=20;
		    	}else{
		    		n= num+1;
		    	}
		    	t.parentNode.children[1].children[0].value= n;
		          sum+=parseInt(dj*n);
		          tr.children[4].innerHTML=sum;
		          footsum();
		   	 }
		     
			
			
			
			
			
		</script>

	</body>

</html>